<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="../../../public/css/general.css">
    <link rel="stylesheet" href="../../../public/css/mint-ui/lib/style.css">
    <link rel="stylesheet" href="../../../public/css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../../public/css/index.css">
    <title>白蔬贞</title>
</head>
<body>
<div id="index">
    <!--<div class="mask" :class="{'mask-show':isShowMask}">-->
    <div class="mask" v-if="isShowMask">
        <div class="change-num">
            <div class="top">输入数量</div>
            <div class="middle">
                <img @click="reduce()" src="../../../public/images/reduce.png" alt="减">
                <input v-focus autofocus id="cart-product-num" type="tel" v-model.number="num">
                <img @click="plus()" src="../../../public/images/plus.png" alt="加">
            </div>
            <div class="bottom">
                <div @click="cancel()" class="cancel">取消</div>
                <div @click="confirm()" class="confirm button-jb-g">确定</div>
            </div>
        </div>
    </div>
    <div class="top-bar">
        <a href="javascript:;" @click="showCity=!showCity" class="location">
            <img src="../../../public/images/location.png" alt="location">城市
        </a>
        <span class="search" @click="toSearch()">
            <img src="../../../public/images/search.png" alt="搜索">
            <input type="text" v-model="searchValue">
        </span>
        <a :href="'tel://'+consumerHotline" class="service">
            <img src="../../../public/images/service.png" alt="客服">客服
        </a>
    </div>
    <div class="content">
        <div class="bubble" v-if="showCity">
            <div class="location">
                <img src="../../../public/images/radio-selected.png" alt="">广州
            </div>
        </div>
        <div class="bsz-swipe">
            <mt-swipe :auto="4000">
                <mt-swipe-item>
                    <img src="../../../public/images/product.png" alt="">
                </mt-swipe-item>
                <mt-swipe-item>
                    <img src="../../../public/images/product.png" alt="">
                </mt-swipe-item>
                <mt-swipe-item>
                    <img src="../../../public/images/product.png" alt="">
                </mt-swipe-item>
            </mt-swipe>
            <div @click="toOftenBuyPage()" class="tip-bar">常购清单>></div>
        </div>
        <!--<div @click="toOftenBuyPage()" class="tip-bar">常购清单>></div>-->
        <div class="products-content">
            <!--常购清单-->
            <div class="often-buy">
                <div class="product" @touchstart="p.touch=!p.touch" @touchend="p.touch=!p.touch" v-for="p in oftenBuyList">
                    <div class="card" :class="{active: p.touch}">
                        <img :src="p.img" alt="">
                        <div class="card-content">
                            <div class="top">
                                <span v-text="p.name"></span>
                                <img @click="removeOftenBuy(p)" src="../../../public/images/del.png" alt="删除">
                            </div>
                            <div class="middle" v-text="p.norm">

                            </div>
                            <div class="bottom">
                                <span class="money" v-text="'¥'+p.basePrice+'起'"></span>
                                <span class="button" :class="{'button-select': p.buttonSelect}" @touchstart.stop="p.buttonSelect=!p.buttonSelect" @touchend.stop="p.buttonSelect=!p.buttonSelect" @click="toShowNorm(p)" v-text="p.showNorm?'收起':'规格'"></span>
                            </div>
                        </div>
                    </div>
                    <div class="norm-card" v-if="p.showNorm">
                        <div class="card-content">
                            <div class="top">
                                <div v-for="n in p.priceList">
                                    <span v-text="n.money"></span>
                                    <span v-text="n.num"></span>
                                </div>
                                <div>
                                    <span>
                                        <span class="money-unit" v-text="p.moneyUnit"></span>/<span class="unit" v-text="p.unit"></span>
                                    </span>
                                    <span v-text="p.unit"></span>
                                </div>
                                <div></div>
                            </div>
                            <div class="middle">
                                <div v-for="n in p.normList">
                                    <span>
                                        <span class="money" v-text="'¥'+n.price"></span>/<span v-text="n.unit"></span>
                                    </span>
                                    <span class="product-control">
                                        <img v-if="n.showControl && (numObj[p.id+'-'+n.id] && numObj[p.id+'-'+n.id]>0)" @click="clickReduce(p, n)" src="../../../public/images/reduce.png" alt="">
                                        <span v-if="n.showControl && (numObj[p.id+'-'+n.id] && numObj[p.id+'-'+n.id]>0)" @click="changeMask(p, n)" v-text="numObj[p.id+'-'+n.id]" class="product-num">1</span>
                                        <span class="plus-control" @touchstart.prevent="n.click=!n.click" @touchend.prevent="clickPlus(p, n)">
                                            <img class="no-touch" v-show="!n.click"  src="../../../public/images/plus.png" alt="">
                                            <img class="has-touch" v-show="n.click" src="../../../public/images/plus2.png" alt="">
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="line"></div>
                </div>
            </div>
        </div>
        <!--为你推荐-->
        <div class="recommend">
            <div class="title">
                <div class="line"></div>
                <div class="circle"></div>
                <div class="tip">为你推荐</div>
                <div class="circle"></div>
                <div class="line"></div>
            </div>
            <div class="middle">
                <div class="product" v-for="r in recommends">
                    <div class="card">
                        <img :src="r.img" alt="图片">
                        <p v-text="r.name"></p>
                        <span>
                                <span v-text="r.basePrice+'/'+r.unit"></span>
                                <span class="icon-cart" @touchstart="touchProductToCart(r, $event)" @touchend.prevent.stop="addProductToCart(r)">
                                    <img class="no-touch" v-if="recommend.id!=r.id" src="../../../public/images/cart-unselected1.png" alt="">
                                    <img class="has-touch" v-if="recommend.id==r.id" src="../../../public/images/cart-selected1.png" alt="">
                                </span>
                            </span>
                    </div>
                </div>
            </div>
            <div class="footer">
                <div class="line"></div>
                <div class="circle"></div>
                <div class="tip">白蔬贞是有底线的！</div>
                <div class="circle"></div>
                <div class="line"></div>
            </div>
        </div>
    </div>
    <mt-tabbar v-model="selected">
        <mt-tab-item id="home">
            <img slot="icon" src="../../../public/images/home.png">
        </mt-tab-item>
        <mt-tab-item id="all">
            <img slot="icon" src="../../../public/images/all-unselected.png">
            全部
        </mt-tab-item>
        <mt-tab-item id="cart">
            <sup v-if="cartNum>0" v-text="cartNumFilter"></sup>
            <img slot="icon" src="../../../public/images/cart-unselected.png">
            购物车
        </mt-tab-item>
        <mt-tab-item id="mine">
            <img slot="icon" src="../../../public/images/mine-unselected.png">
            我的
        </mt-tab-item>
    </mt-tabbar>
</div>
<script src="../../../public/js/vue.js"></script>
<!--<script src="https://unpkg.com/mint-ui/lib/index.js"></script>-->
<script src="../../../public/css/mint-ui/lib/index.js"></script>
<script src="../../../public/js/store.js"></script>
<script src="../../../public/js/wechat/mixin.js"></script>
<script src="../../../public/js/jquery.min.js"></script>
<script src="../../../public/js/index.js"></script>
</body>
</html>